<template>
  <div>
    <el-container style="height: 660px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: #c3def0">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-edit"></i>信息修改</template>
            <el-menu-item-group>
              <router-link class="alink" to="/info">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>
              </router-link>
              <router-link class="alink" to="/management">
                <el-menu-item index="1-2">
                  账号管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>领养申请</template>
            <el-menu-item-group >
              <router-link class="alink" to="mine/myAudit">
                <el-menu-item index="2-1">
                  发布的申请
                </el-menu-item>
              </router-link>
              <router-link class="alink" to="/receive">
                <el-menu-item index="2-2">
                  收到的申请
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>宠物
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/myPut">
                <el-menu-item index="3-1">
                  我发布的宠物
                </el-menu-item>
              </router-link>
              <router-link class="alink" to="/myGet">
                <el-menu-item index="3-2">
                  我领养的宠物
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <router-link class="alink" to="/myAppointment">
          <el-menu-item index="4">
            <i class="el-icon-user"></i>
            <span slot="title">我的预约</span>
          </el-menu-item>
          </router-link>
          <router-link class="alink" to="/remind">
          <el-menu-item index="5">
            <i class="el-icon-alarm-clock"></i>
            <span slot="title">设置日程提醒</span>
          </el-menu-item>
          </router-link>
          <router-link class="alink" to="/iLike">
          <el-menu-item index="6">
            <i class="el-icon-star-off"></i>
            <span slot="title">收藏</span>
          </el-menu-item>
          </router-link>
        </el-menu>
      </el-aside>
      <el-container class="bg" style="background-repeat: no-repeat;background-size:100% 100%;">
        <el-main>
          <div style="width: 80%;margin: 0 auto">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "MineView",
  data() {

    return {

    }
  },
  created() {
    // 默认选择 "个人信息" 导航链接
    this.$router.push('/info');
  },
}
</script>

<style scoped>
.bg {
  background-image: url('../assets/images/minebackground.jpg');
}
.el-header {
  background-color: #e5efe2;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.router-link-active {
  text-decoration: none;
}

.el-menu{
  background-color:#c3def0
}

.el-submenu{
  background-color: #c3def0
}
.el-menu-item{
  background-color: #c3def0
}

.alink{

  text-decoration: none;
}
</style>